/*
 * 城市选择jquer插件
 *
 * Licensed under the MIT license:
 * https://github.com/callmeJozo/kuCity
 *
 * Author: Naraku(http://segmentfault.com/u/naraku_)
 *
 * Version:  1.0
 *
 */

(function($) {
     function a(target) {
        this.target = target; // 输入框
        this.container = null; //插件容器
        this.resultct = null; //搜索结果容器
        this.isKeyslect = false; //是否在用上下键选择
        this.isContainerExit = false; // 插件容器是否已存在
    };
	var KuCity=a;
  
   
    KuCity.prototype = {
        constructor: KuCity,
        //初始化
        init: function(data) {
			this.creatData(data);
            this.creatItem();
            this.tabChange();
            this.citySelect();
            this.inputSearch();
            this.keySelect();
            this.stopPropagation();
        },
		//数据
		creatData:function(data){
	var allCities=[];
	var allCities =data;
	var regEx = /^([[a-zA-Z0-9_\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i, // 匹配汉字，拼音
        regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/, // 只匹配拼音
        reg_ah = /^[a-h]$/i, // 匹配首字母为 a-h
        reg_ip = /^[i-p]/i, // 匹配首字母为 i-p
        reg_qz = /^[q-z]/i; // 匹配首字母为 q-z

    //构建城市分类字面量
    city = {
        ABCDEFGH: {},
        IJKLMNOP: {},
        QRSTUVWXYZ: {}
    }; 
    if(allCities!=null){
		for (var i = 0, len = allCities.length; i < len; i++) {
	            var part = regEx.exec(allCities[i]),
	                en = part[1], //中文名
	                letter = part[2], //拼音
	                spletter = part[3], //拼音简写
	                first = letter[0].toUpperCase(), //拼音首字母
	                ltPart; //当前字母下的城市
	           
	            if (reg_ah.test(first)) {
	                ltPart = 'ABCDEFGH';
	            } else if (reg_ip.test(first)) {
	                ltPart = 'IJKLMNOP';
	            } else if (reg_qz.test(first)) {
	                ltPart = 'QRSTUVWXYZ';
	            }
	
	            city[ltPart][first] ? city[ltPart][first].push(en) : (city[ltPart][first] = [], city[ltPart][first].push(en));
	        }
		}
		},
        //创建市列表
        creatItem: function() {
            var template = '<div class="kucity"><div class="citybox"><h3 class="kucity_header">城市列表(支持汉字/拼音搜索)</h3><ul class="kucity_nav"><li class="active">ABCDEFGH</li><li>IJKLMNOP</li><li>QRSTUVWXYZ</li></ul><div class="kucity_body"></div></div><ul class="result"></ul></div>';
            //$('body').append(template);
			$('body #box').html(template);
            this.container = $('.kucity');
            this.resultct = $('.result');
			
            for (var group in city) {
                var itemKey = [];

                for (var item in city[group]) {
                    itemKey.push(item);
                }
                itemKey.sort();
                var itembox = $('<div class="kucity_item">');
                $('.kucity_item').eq(0).addClass('active').siblings().removeClass('active');
                itembox.addClass(group);

                for (var i = 0, iLen = itemKey.length; i < iLen; i++) {
                    var dl = $('<dl>'),
                        dt = '<dt>' +  itemKey[i] + '</dt>',
                        dd = $('<dd>'),
                        str = '';

                    for (var j = 0, jLen = city[group][itemKey[i]].length; j < jLen; j++) {
                        str += '<span>' + city[group][itemKey[i]][j] + '</span>'
                    }

                    dd.append(str);
                    dl.append(dt).append(dd);
                    itembox.append(dl);
                }
                $('.kucity_body').append(itembox);
                this.container.find('.hot').addClass('active');
            }
            this.isContainerExit = true;
        },
        //创建搜索结果列表
        creatResult: function(re, value) {
            var result = re.result,
                len = result.length,
                str = '';
            if (!!len) {
                for (var i = 0; i < len; i++) {
                    str += '<li><span class="name">' + result[i].cityName + '</span><span class="letter">' + result[i].py + '</span></li>'
                }
                this.container.find('.result').html('').html(str).find('li').eq(0).addClass('active');
            } else {
                this.container.find('.result').html('<li>没有找到<span class="noresult">' + value + '</span>相关信息</li>');
            }
        },
        //列表切换
        tabChange: function() {
            $('.kucity_nav').on('click', 'li', function(e) {
                var current = $(e.target),
                    index = current.index();

                current.addClass('active').siblings().removeClass('active');
                $('.kucity_item').eq(index).addClass('active').siblings().removeClass('active');
                $(' .kucity_body').scrollTop(0);

            })
        },
        //城市选择
        citySelect: function() {
            var self = this;
            $('.kucity_item dd').on('click', 'span', function(e) {
            	self.target.val(($(e.target).text()));
            	
            	var type = self.target.attr("name");
        		var suffix = self.target.attr("id").slice(type.length);
    	        var value=self.target.val();
    	        
    	        kucity.updateSelectedConditions(type, suffix, value);
    	    
            })
        },
        //上下键选择搜索结果
        keySelect: function() {
            var self = this;
            this.target.on('keydown', function(e){
                var current = self.resultct.find('.active').index();
                if(current !== -1){
                    switch(e.keyCode){
                        //上
                        case 38: 
                            keyActive(false);
                            break;
                        //下
                        case 40:
                            keyActive(true);
                            break;
                        //确定
                        case 13: 
                            self.isKeyslect = false;
                            var value = self.resultct.find('.active .name').text();
                            self.target.val(value);
                            self.triggleShow('all');
                            self.target.blur();
                            
                            //更新已选条件
                            var type = self.target.attr("name");
                    		var suffix = self.target.attr("id").slice(type.length);
                	        var value=self.target.val();
                	        
                	        kucity.updateSelectedConditions(type, suffix, value);
                	        
                            break;
                        default: 
                            self.isKeyslect = false;
                            break;
                    }

                    function keyActive(isInorder) {
                        var max = self.resultct.find('li').length - 1;
                        if(isInorder){
                            current = current == max ? 0 : current + 1;
                        }else{
                            current = current == 0 ? max : current - 1;
                        }
                        self.resultct.find('li').eq(current).addClass('active').siblings().removeClass('active');
                        self.isKeyslect = true;
                    }
                }
            })
        },
        //搜索
        inputSearch: function() {
            var self = this;
            this.target.on('keyup', function(e) {
                if(!self.isKeyslect){
                    self.throttle(search, this);
                }
            })
            // 输入框搜索
            function search(e,type) {
                var container = self.container;
                self.triggleShow(false);
                
                var str = '';
                var id = $(this).attr('id');
                if(id.indexOf('province') >= 0) {//省
                	str = id.substr(8);
                } else if(id.indexOf('city') >= 0) {//市
                	str = id.substr(4);
                }
                
                var value = $(this).val();
                
                var provinceCity=$(this).attr("provinceCity");
                
                var provinces="";
                
                if (value) {
                	if(provinceCity=="3") {//市
                    	$("#selectedConditions"+str+" .province_a"+str+" a").each(function() {
                    		provinces += $(this).text()+";";
                    	});
                	};
                	
    				axios({
  					  method: 'get',
  					  url: "/resources/rsing/query/getRegion",
  					  params: {"value":value,"region":provinceCity,"pro":provinces}
	  				}).then(function (response) {
	  					self.creatResult(response.data, value);
	  				});
                } else {
                    self.triggleShow(true);
                }
            }
        },
        //列表，结果，整体 显示切换
        triggleShow: function(open) {
            var container = this.container;
            if (open === 'all') {
                container.hide()
            } else if (open) {
                container.find('.citybox').show().end().find('.result').hide();
            } else {
                container.find('.citybox').hide().end().find('.result').show();
            }
        },
        //函数节流
        throttle: function(fn, context) {
            clearTimeout(fn.tId);
            fn.tId = setTimeout(function(){
                fn.call(context);
            }, 100)
        },
        //阻止事件冒泡
        stopPropagation: function() {
            var self = this;
            //阻止事件冒泡
            this.container.on('click', stopPropagation);
            this.target.on('click', stopPropagation);
            //页面点击 隐藏
            $(document).on('click', function() {
                self.container.hide();
            })
            function stopPropagation(e) {
                e.stopPropagation();
            }
        },
        //更新已选条件
        updateSelectedConditions: function(type, suffix, value) {
    		if(value == '') {
    			return;
    		}
    		
    		if(!$("#selectedConditions"+suffix)) {
    			return;
    		}
    		
            //更新已选条件
            var array = [];
        	$("#selectedConditions"+suffix+" ."+type+"_a"+suffix+" a").each(function() {
        		array.push($(this).text());
        	});
        	var result=$.inArray(value, array); 
        	if(result == -1) {
        		$("#selectedConditions"+suffix).append("<dd class='selected "+type+"_a"+suffix+"'><a href='#'>"+value+"</a></dd>");
        	}

            isShowNoSelectedConditionsDiv('selectedConditions'+suffix);
        },
    };

    var kucity = null;
	
    $.fn.kuCity = function(options) {
        var target = $(this);
        
        target.focus(function(e) {
			var top = $(this).offset().top + $(this).outerHeight(),
            left = $(this).offset().left;
			
			var type = $(this).attr("name");
			var suffix = $(this).attr("id").slice(type.length);
			
        	//省或者市
			var provinceCity = $(this).attr("provinceCity");
			
			//已选择的省
        	var provinces = ""; 
			
			//城市
			if(provinceCity=="3") {
			    $("#selectedConditions"+suffix+" .province_a"+suffix+" a").each(function() {
	        		provinces += $(this).text()+";";
	        	});
			}
			
			axios({
				  method: 'get',
				  url: '/resources/rsing/query/getRegion',
				  params: {"value":'', "region":provinceCity,"pro":provinces}
			}).then(function (response) {
            	var data = response.data.data;
                kucity = kucity ? kucity : new KuCity(target);
                kucity.target = $(e.target);
                kucity.init(data);
                kucity.container.show().offset({
                    'top': top + 7,
                    'left': left
                });
                kucity.triggleShow(true);
                kucity.resultct.on('click', 'li', function() {
                	//搜索下拉列表点击事件
                	var value = $(this).find('.name').text();
                    kucity.target.val(value);
                    kucity.triggleShow('all');
                    
                    kucity.updateSelectedConditions(type, suffix, value);
                });
            });
        })
        return this;
    };
})(jQuery)


